<template>
  <view
    class="pagetabs"
    :style="{paddingTop: navBarHeight?navBarHeight + 'px' : ''}"
  >
    <view
      class="pagetabs-head"
      :style="{height: titleBarHeight?titleBarHeight + 'px' : '',top: statusBarHeight?statusBarHeight + 'px' : ''}"
    >
      <view
        class="pagetabs-head-item"
        :class="currentTab==0?'active':''"
        data-current="0"
        @click="swichNav"
      >
        推荐
      </view>
      <view
        class="pagetabs-head-item"
        :class="currentTab==1?'active':''"
        data-current="1"
        @click="swichNav"
      >
        发现
      </view>
    </view>
    <swiper
      class="pagetabs-content"
      :current="currentTab"
      duration="300"
      @change="switchTab"
    >
      <swiper-item>
        <recommend :url="apis.recommend" />
      </swiper-item>
      <swiper-item>
        <discover className="pagetabs-content-scroll" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import Recommend from '@/components/home/recommend'
import Discover from '@/components/home/discover'
export default {
  components: {
    Recommend,
    Discover
  },

  data () {
    return {
      statusBarHeight: 20, // 状态栏高度
      titleBarHeight: '', // 标题栏高度
      navBarHeight: '', // 导航栏总高度
      currentTab: 0, // 预设当前项的值
      scrollLeft: 0, // tab标题的滚动条位置
      expertList: [
        {
          // 假数据
          img: 'avatar.png',
          name: '欢顔',
          tag: '知名情感博主',
          answer: 134,
          listen: 2234
        }
      ],
      apis: {
        recommend: 'home/recommend'
      },
      title: '',
      titleColor: '#000000',
      username: 'EMHOME',
      gender: 2,
      avatar: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
      cover: 'http://oss.youmbe.com/assets/ucenter/background.jpg',
      video: '/static/icons/video.png',
      checkedItemId: 0,
      show: false,
      data: {
        name: 'test',
        thumb: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
        begintime: '2019-09-21',
        description: 'test',
        likes: '22'
      },
      contents: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30
      ],
      cells: [
        {
          id: 1,
          title: '12年前发明“熊猫烧香”病毒的网络天才，坐4年牢后，现状如何？',
          description: '微观影1视 1小时前 102评论',
          format: 'banner',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/01.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 2,
          title: '济南东部房价“喋喋不休”，西部房价依然坚挺，为何？',
          description: '济南楼市 1小时前 102评论',
          format: 'default',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/02.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 3,
          title: '心寒！市民主动清理黑衣人设置的路障 被暴徒用重器猛击头部',
          description: '环球网国内 7小时前 21评论',
          format: 'default',
          medias: []
        },
        {
          id: 4,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/05.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 6,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 5,
          title: '国庆七十周年阅兵 显国威、振军威',
          description: '凤凰网 10-01 10:27 12,321评论',
          format: 'grid',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/11.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/12.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/13.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/14.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/15.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/16.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/17.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/18.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/19.jpg',
              format: 'image'
            }
          ]
        }
      ],
      items: [
        {
          id: 1,
          title: '随后拍',
          price: '￥100',
          thumb: 'http://oss.youmbe.com/mp/1.png',
          description: '随时随地，想拍就拍'
        },
        {
          id: 2,
          title: '信息发布',
          price: '￥500',
          thumb: 'http://oss.youmbe.com/mp/2.png',
          description: '最新的消息都属于你'
        },
        {
          id: 3,
          title: '投票',
          price: '￥200',
          thumb: 'http://oss.youmbe.com/mp/3.png',
          description: '为他投上一票'
        },
        {
          id: 4,
          title: '抽奖',
          price: '￥1480',
          thumb: 'http://oss.youmbe.com/mp/4.png',
          description: '惊喜好运在这里'
        }
      ]
    }
  },

  created () {
    console.log(process.env.HOST)
    console.log('index/index created')
    let systemData = mpvue.getStorageSync('systemData')
    this.statusBarHeight = systemData.statusBarHeight
    let platformReg = /ios/i
    if (platformReg.test(systemData.platform)) {
      this.titleBarHeight = 46
    } else {
      this.titleBarHeight = 50
    }
    this.navBarHeight = this.statusBarHeight + this.titleBarHeight
  },
  computed: {},
  methods: {
    // 滚动切换标签样式
    switchTab (e) {
      this.currentTab = e.mp.detail.current
    },
    // 点击标题切换当前页时改变样式
    swichNav (e) {
      var cur = e.mp.target.dataset.current
      if (this.currentTab === cur) {
        return false
      } else {
        this.currentTab = cur
      }
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.pagetabs {
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  &-head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 48px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 2px;
    &-item {
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      position: relative;
      &::after {
        height: 4px;
        border-radius: 4px;
        width: 20px;
        background: transparent;
        margin-left: -10px;
        position: absolute;
        left: 50%;
        bottom: 2px;
        content: "";
        display: block;
      }
      &.active {
        font-size: 20px;
        font-weight: bold;
        &::after {
          background: #4675f9;
        }
      }
    }
  }

  &-content {
    height: 100%;
    box-sizing: border-box;
    &-scroll {
      height: 100%;
    }
  }
}
</style>
